<template>
  <view :class="theme">
    <label class="bg-2 mb-2 mt-10 p-30">
      <label class="fs-28" style="width: 120rpx;">收货人</label>
      <input v-model="formData.name.value" class="f1 ml-80 fs-28" type="text" maxlength="12" placeholder="请输入收货人姓名" />
    </label>
    <label class="bg-2 mb-2 p-30">
      <label class="fs-28" style="width: 120rpx;">联系电话</label>
      <input v-model="formData.phoneNumber.value" class="f1 ml-80 fs-28" type="number" maxlength="11"
        placeholder="请输入联系电话" />
    </label>
    <picker class="bg-2 mb-2 p-30" mode="multiSelector" :range="range" range-key="label" @change="changeArea"
      @columnchange="columnChange">
      <label>
        <label class="fs-28" style="width: 120rpx;">所在地区</label>
        <input v-model="formData.area.value" class="f1 ml-80 fs-28" type="text" placeholder="请选择省、市、区" disabled>
        <u-icon size="18" color="#666" type="arrow-bottom" />
      </label>
    </picker>
    <view class="fd-row bg-2 mb-10 ai-start p-30">
      <label class="fs-28" style="width: 120rpx;">详细地址</label>
      <textarea class="f1 ml-80 fs-28 height-100" v-model="formData.address.value" placeholder="请输入详细地址" maxlength="50"
        placeholder-class=" fs-28" />
    </view>

    <button @click="submit" hover-class="tap-hover" class="bg-6 color-2 fs-32 m-30 br-10"
      style="line-height: 88rpx;">保存</button>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import area from "@/static/server/area.json";
import { reactive, computed } from "vue";
import { debounce, pickObjectProperty, sleep } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";


const { theme } = useMapState(["theme"]);
const rangeIndex = reactive([0, 0, 0]);
const range = computed(() => [
  area.map(item => pickObjectProperty(["pid", "value", "label"], item)),
  area[rangeIndex[0]].children.map(item => pickObjectProperty(["pid", "value", "label"], item)),
  area[rangeIndex[0]].children[rangeIndex[1]].children.map(item => pickObjectProperty(["pid", "value", "label"], item))
]);
const columnChange = ({ detail }: any) => {
  rangeIndex[detail.column] = detail.value;
}

const formData = reactive({
  name: {
    value: "",
    field: "contact",
    rule: /^[\u4E00-\u9FA5a-zA-Z0-9]{1,10}$/,
    errorMessage: "收货人姓名输入不合法",
  },
  phoneNumber: {
    value: "",
    field: "telephone",
    rule: /^1[0-9]{10}$/,
    errorMessage: "手机号码输入有误",
  },
  area: {
    value: "",
    field: "area",
    rule: /^.+$/,
    errorMessage: "请选择所在地区",
  },
  address: {
    value: "",
    field: "address",
    rule: /^[\u4E00-\u9FA5a-zA-Z0-9 ]{1,30}$/,
    errorMessage: "详细地址输入不合法",
  },
});

onLoad(({ id }: any) => {
  if (!id) {
    uni.setNavigationBarTitle({ title: "添加地址" });
    return;
  }
})

const changeArea = () => {
  const result = rangeIndex.map((item, index) => range.value[index][item]);
  formData.area.value = result.map(item => item.label).join(" ");
}

const submit = debounce(() => {
  const data: any = {},
    verification = (<Array<keyof typeof formData>>Object.keys(formData)).every(key => {
      const { value, field, errorMessage, rule } = formData[key] as any;
      if (errorMessage && !rule.test(String(value))) {
        uni.showToast({ title: errorMessage, icon: "none" });
        return false;
      }

      field && (data[field] = value);
      return true;
    });
  if (!verification) return;

  uni.request({
    url: "/addAddress",
    data: {
      name: formData.name.value,
      mobile: formData.phoneNumber.value,
      address: `${formData.area.value}${formData.address.value}`
    },
    success: async () => {
      uni.showToast({ title: "已保存", duration: 1200 });
      await sleep(1.2);
      uni.navigateBack();
    }
  })
});

</script>

<style lang="scss" scoped></style>